<template>
  <div>
    <div class="container">
      <div class="row">
        <div class="col-lg-12">
          <div class="page-content">

            <!-- ***** Featured Start ***** -->
            <div class="row">
              <div class="col-lg-12">
                <div class="feature-banner header-text">
                  <div class="row">
                    <div class="col-lg-4">
                      <img src="../assets/template-res/assets/images/feature-left.jpg" alt="" style="border-radius: 23px;">
                    </div>
                    <div class="col-lg-8">
                      <div class="thumb">
                        <img src="../assets/template-res/assets/images/feature-right.jpg" alt="" style="border-radius: 23px;">
                        <a href="https://www.youtube.com/watch?v=r1b03uKWk_M" target="_blank"><i class="fa fa-play"></i></a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- ***** Featured End ***** -->

            <!-- ***** Details Start ***** -->
            <div class="game-details">
              <div class="row">
                <div class="col-lg-12">
                  <h2>Fortnite Details</h2>
                </div>
                <div class="col-lg-12">
                  <div class="content">
                    <div class="row">
                      <div class="col-lg-6">
                        <div class="left-info">
                          <div class="left">
                            <h4>Fortnite</h4>
                            <span>Sandbox</span>
                          </div>
                          <ul>
                            <li><i class="fa fa-star"></i> 4.8</li>
                            <li><i class="fa fa-download"></i> 2.3M</li>
                          </ul>
                        </div>
                      </div>
                      <div class="col-lg-6">
                        <div class="right-info">
                          <ul>
                            <li><i class="fa fa-star"></i> 4.8</li>
                            <li><i class="fa fa-download"></i> 2.3M</li>
                            <li><i class="fa fa-server"></i> 36GB</li>
                            <li><i class="fa fa-gamepad"></i> Action</li>
                          </ul>
                        </div>
                      </div>
                      <div class="col-lg-4">
                        <img src="../assets/template-res/assets/images/details-01.jpg" alt="" style="border-radius: 23px; margin-bottom: 30px;">
                      </div>
                      <div class="col-lg-4">
                        <img src="../assets/template-res/assets/images/details-02.jpg" alt="" style="border-radius: 23px; margin-bottom: 30px;">
                      </div>
                      <div class="col-lg-4">
                        <img src="../assets/template-res/assets/images/details-03.jpg" alt="" style="border-radius: 23px; margin-bottom: 30px;">
                      </div>
                      <div class="col-lg-12">
                        <p>Cyborg Gaming is free HTML CSS website template provided by TemplateMo. This is Bootstrap v5.2.0 layout. You can make a <a href="https://paypal.me/templatemo" target="_blank">small contribution via PayPal</a> to info [at] templatemo.com and thank you for supporting. If you want to get the PSD source files, please contact us. Lorem ipsum dolor sit consectetur es dispic dipiscingei elit, sed doers eiusmod lisum hored tempor.</p>
                      </div>
                      <div class="col-lg-12">
                        <div class="main-border-button">
                          <a href="#">Download Fortnite Now!</a>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- ***** Details End ***** -->

            <!-- ***** Other Start ***** -->
            <div class="other-games">
              <div class="row">
                <div class="col-lg-12">
                  <div class="heading-section">
                    <h4><em>Other Related</em> Games</h4>
                  </div>
                </div>
                <div class="col-lg-6">
                  <div class="item">
                    <img src="../assets/template-res/assets/images/game-01.jpg" alt="" class="templatemo-item">
                    <h4>Dota 2</h4><span>Sandbox</span>
                    <ul>
                      <li><i class="fa fa-star"></i> 4.8</li>
                      <li><i class="fa fa-download"></i> 2.3M</li>
                    </ul>
                  </div>
                </div>
                <div class="col-lg-6">
                  <div class="item">
                    <img src="../assets/template-res/assets/images/game-02.jpg" alt="" class="templatemo-item">
                    <h4>Dota 2</h4><span>Sandbox</span>
                    <ul>
                      <li><i class="fa fa-star"></i> 4.8</li>
                      <li><i class="fa fa-download"></i> 2.3M</li>
                    </ul>
                  </div>
                </div>
                <div class="col-lg-6">
                  <div class="item">
                    <img src="../assets/template-res/assets/images/game-03.jpg" alt="" class="templatemo-item">
                    <h4>Dota 2</h4><span>Sandbox</span>
                    <ul>
                      <li><i class="fa fa-star"></i> 4.8</li>
                      <li><i class="fa fa-download"></i> 2.3M</li>
                    </ul>
                  </div>
                </div>
                <div class="col-lg-6">
                  <div class="item">
                    <img src="../assets/template-res/assets/images/game-02.jpg" alt="" class="templatemo-item">
                    <h4>Dota 2</h4><span>Sandbox</span>
                    <ul>
                      <li><i class="fa fa-star"></i> 4.8</li>
                      <li><i class="fa fa-download"></i> 2.3M</li>
                    </ul>
                  </div>
                </div>
                <div class="col-lg-6">
                  <div class="item">
                    <img src="../assets/template-res/assets/images/game-03.jpg" alt="" class="templatemo-item">
                    <h4>Dota 2</h4><span>Sandbox</span>
                    <ul>
                      <li><i class="fa fa-star"></i> 4.8</li>
                      <li><i class="fa fa-download"></i> 2.3M</li>
                    </ul>
                  </div>
                </div>
                <div class="col-lg-6">
                  <div class="item">
                    <img src="../assets/template-res/assets/images/game-01.jpg" alt="" class="templatemo-item">
                    <h4>Dota 2</h4><span>Sandbox</span>
                    <ul>
                      <li><i class="fa fa-star"></i> 4.8</li>
                      <li><i class="fa fa-download"></i> 2.3M</li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
            <!-- ***** Other End ***** -->

          </div>
        </div>
      </div>
    </div>
    
  </div>
</template>

<script>



import 'bootstrap/dist/js/bootstrap.js'
import Isotope from 'isotope-layout'
import "../assets/template-res/assets/js/owl-carousel.js"
import "../assets/template-res/assets/js/tabs.js"
import "../assets/template-res/assets/js/popup.js"
import 'swiper';
import 'swiper/css/swiper.min.css';

export default {
  name: 'DetailView',
  components: {

  },
  mounted() {
    this.customInit();

  },
  methods:{
    //模板中自定义的初始化方法
    customInit: function () {

      //region  WOW JS 初始化相关操作
      $(window).on('load', function () {
        if ($(".wow").length) {
          let wow = new WOW({
            boxClass: 'wow',      // Animated element css class (default is wow)
            animateClass: 'animated', // Animation css class (default is animated)
            offset: 20,         // Distance to the element when triggering the animation (default is 0)
            mobile: true,       // Trigger animations on mobile devices (default is true)
            live: true,       // Act on asynchronously loaded content (default is true)
          });
          wow.init();
        }
      });
      //endregion

      //region （描述：监听窗口滑动）
      $(window).scroll(function () {
        let scroll = $(window).scrollTop();
        let box = $('.header-text').height();
        let header = $('header').height();
        if (scroll >= box - header) {
          $("header").addClass("background-header");
        } else {
          $("header").removeClass("background-header");
        }
      });
      //endregion

      //region （描述：同位素相关初始化操作）
      let elem = null;

      if ($('.grid').length) {
        elem = $('.grid')[0];
      }
      let $grid = null;
      if (elem) {
        $grid = new Isotope(elem, {
          itemSelector: ".all",
          percentPosition: true,
          masonry: {
            columnWidth: ".all"
          }
        });
      }
      $('.filters ul li').click(function () {
        $('.filters ul li').removeClass('active');
        $(this).addClass('active');

        let data = $(this).attr('data-filter');

        if ($grid) {
          $grid.isotope({
            filter: data
          })
        }
      });
      //endregion


      let width = $(window).width();
      $(window).resize(function () {
        if (width > 992 && $(window).width() < 992) {
          location.reload();
        } else if (width < 992 && $(window).width() > 992) {
          location.reload();
        }
      })


      $(document).on("click", ".naccs .menu div", function () {
        let numberIndex = $(this).index();

        if (!$(this).is("active")) {
          $(".naccs .menu div").removeClass("active");
          $(".naccs ul li").removeClass("active");

          $(this).addClass("active");
          $(".naccs ul").find("li:eq(" + numberIndex + ")").addClass("active");

          let listItemHeight = $(".naccs ul")
              .find("li:eq(" + numberIndex + ")")
              .innerHeight();
          $(".naccs ul").height(listItemHeight + "px");
        }
      });

      $('.owl-features').owlCarousel({
        items: 3,
        loop: true,
        dots: false,
        nav: true,
        autoplay: true,
        margin: 30,
        responsive: {
          0: {
            items: 1
          },
          600: {
            items: 2
          },
          1200: {
            items: 3
          },
          1800: {
            items: 3
          }
        }
      })

      $('.owl-collection').owlCarousel({
        items: 3,
        loop: true,
        dots: false,
        nav: true,
        autoplay: true,
        margin: 30,
        responsive: {
          0: {
            items: 1
          },
          800: {
            items: 2
          },
          1000: {
            items: 3
          }
        }
      })

      $('.owl-banner').owlCarousel({
        items: 1,
        loop: true,
        dots: false,
        nav: true,
        autoplay: true,
        margin: 30,
        responsive: {
          0: {
            items: 1
          },
          600: {
            items: 1
          },
          1000: {
            items: 1
          }
        }
      })


      //region （描述：菜单按键点击事件绑定）
      // Menu Dropdown Toggle
      if ($('.menu-trigger').length) {
        $(".menu-trigger").on('click', function () {
          $(this).toggleClass('active');
          $('.header-area .nav').slideToggle(200);
        });
      }
      //endregion


      // Menu elevator animation
      $('.scroll-to-section a[href*=\\#]:not([href=\\#])').on('click', function () {
        if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
          let target = $(this.hash);
          target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');

          if (target.length) {
            let width = $(window).width();
            if (width < 991) {
              $('.menu-trigger').removeClass('active');
              $('.header-area .nav').slideUp(200);
            }
            $('html,body').animate({
              scrollTop: (target.offset().top) - 80
            }, 700);
            return false;
          }
        }
      });

      $(document).ready(function () {
        $(document).on("scroll", onScroll);

        //smoothscroll
        $('.scroll-to-section a[href^="#"]').on('click', function (e) {
          e.preventDefault();
          $(document).off("scroll");

          $('.scroll-to-section a').each(function () {
            $(this).removeClass('active');
          })
          $(this).addClass('active');

          let target = this.hash, menu = target;
          target = $(this.hash);
          $('html, body').stop().animate({
            scrollTop: (target.offset().top) - 79
          }, 500, 'swing', function () {
            window.location.hash = target;
            $(document).on("scroll", onScroll);
          });
        });
      });

      function onScroll(event) {
        let scrollPos = $(document).scrollTop();
        $('.nav a').each(function () {
          let currLink = $(this);

          let refElement = $(currLink.attr("href"));

          if (refElement.length) {
            if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
              $('.nav ul li a').removeClass("active");
              currLink.addClass("active");
            } else {
              currLink.removeClass("active");
            }
          }
        });
      }


      // Page loading animation
      $(window).on('load', function () {
        if ($('.cover').length) {
          $('.cover').parallax({
            imageSrc: $('.cover').data('image'),
            zIndex: '1'
          });
        }

        $("#preloader").animate({
          'opacity': '0'
        }, 600, function () {
          setTimeout(function () {
            $("#preloader").css("visibility", "hidden").fadeOut();
          }, 300);
        });
      });


      const dropdownOpener = $('.main-nav ul.nav .has-sub > a');

      // Open/Close Submenus
      if (dropdownOpener.length) {
        dropdownOpener.each(function () {
          let _this = $(this);

          _this.on('tap click', function (e) {
            let thisItemParent = _this.parent('li'),
                thisItemParentSiblingsWithDrop = thisItemParent.siblings('.has-sub');

            if (thisItemParent.hasClass('has-sub')) {
              let submenu = thisItemParent.find('> ul.sub-menu');

              if (submenu.is(':visible')) {
                submenu.slideUp(450, 'easeInOutQuad');
                thisItemParent.removeClass('is-open-sub');
              } else {
                thisItemParent.addClass('is-open-sub');

                if (thisItemParentSiblingsWithDrop.length === 0) {
                  thisItemParent.find('.sub-menu').slideUp(400, 'easeInOutQuad', function () {
                    submenu.slideDown(250, 'easeInOutQuad');
                  });
                } else {
                  thisItemParent.siblings().removeClass('is-open-sub').find('.sub-menu').slideUp(250, 'easeInOutQuad', function () {
                    submenu.slideDown(250, 'easeInOutQuad');
                  });
                }
              }
            }

            e.preventDefault();
          });
        });
      }


    }

  },
}
</script>